<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康BMI计算器</title>
    <style>
        :root {
            --primary-color: #4CAF50;
            --secondary-color: #2196F3;
            --warning-color: #FF9800;
            --danger-color: #F44336;
            --text-color: #333;
            --light-bg: #f9f9f9;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: var(--text-color);
        }
        
        .container {
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 850px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            background-color: var(--primary-color);
            color: white;
            text-align: center;
            padding: 30px 20px;
            position: relative;
        }
        
        .header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 16px;
            opacity: 0.9;
        }
        
        .content {
            display: flex;
            flex-wrap: wrap;
        }
        
        .form-section {
            flex: 1;
            min-width: 300px;
            padding: 30px;
            border-right: 1px solid #eee;
        }
        
        .result-section {
            flex: 1;
            min-width: 300px;
            padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
        }
        
        .form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        .form-group input:focus {
            border-color: var(--primary-color);
            outline: none;
        }
        
        .gender-options {
            display: flex;
            gap: 15px;
        }
        
        .gender-option {
            flex: 1;
            position: relative;
        }
        
        .gender-option input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }
        
        .gender-option label {
            display: block;
            text-align: center;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .gender-option input:checked + label {
            border-color: var(--primary-color);
            background-color: rgba(76, 175, 80, 0.1);
            color: var(--primary-color);
        }
        
        button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
            width: 100%;
            margin-top: 10px;
        }
        
        button:hover {
            background-color: #3d8c40;
        }
        
        .reset-btn {
            background-color: #f1f1f1;
            color: #555;
            margin-top: 10px;
        }
        
        .reset-btn:hover {
            background-color: #e1e1e1;
        }
        
        .bmi-result {
            text-align: center;
            padding: 20px;
            margin-top: 20px;
            border-radius: 12px;
            background-color: var(--light-bg);
            display: none;
        }
        
        .bmi-value {
            font-size: 48px;
            font-weight: 700;
            margin: 10px 0;
            color: var(--primary-color);
        }
        
        .bmi-category {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 15px;
        }
        
        .bmi-desc {
            font-size: 15px;
            line-height: 1.6;
            color: #666;
        }
        
        .bmi-chart {
            margin-top: 30px;
        }
        
        .bmi-chart h3 {
            margin-bottom: 15px;
            text-align: center;
        }
        
        .chart-container {
            position: relative;
            height: 40px;
            border-radius: 20px;
            overflow: hidden;
            background: linear-gradient(to right, 
                #4287f5 0%, 
                #4CAF50 18.5%, 
                #FFC107 25%, 
                #FF9800 35%, 
                #F44336 100%);
            margin-bottom: 15px;
        }
        
        .bmi-marker {
            position: absolute;
            height: 48px;
            width: 4px;
            background-color: #333;
            top: -4px;
            transition: left 0.5s ease;
            left: 0%;
        }
        
        .bmi-marker:after {
            content: '';
            position: absolute;
            bottom: 10px;
            left: -4px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #333;
        }
        
        .chart-labels {
            display: flex;
            justify-content: space-between;
            padding: 0 5px;
            font-size: 13px;
            font-weight: 600;
        }
        
        .health-tips {
            margin-top: 30px;
        }
        
        .health-tips h3 {
            margin-bottom: 15px;
        }
        
        .tips-content {
            display: none;
        }
        
        .tips-content p {
            margin-bottom: 10px;
            line-height: 1.6;
            font-size: 15px;
        }
        
        @media (max-width: 768px) {
            .content {
                flex-direction: column;
            }
            
            .form-section {
                border-right: none;
                border-bottom: 1px solid #eee;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>健康BMI计算器</h1>
            <p>了解您的身体质量指数，保持健康生活</p>
        </div>
        
        <div class="content">
            <div class="form-section">
                <div class="form-group">
                    <label for="gender">性别</label>
                    <div class="gender-options">
                        <div class="gender-option">
                            <input type="radio" id="male" name="gender" value="male" checked>
                            <label for="male">男性</label>
                        </div>
                        <div class="gender-option">
                            <input type="radio" id="female" name="gender" value="female">
                            <label for="female">女性</label>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="height">身高 (厘米)</label>
                    <input type="number" id="height" placeholder="例如: 170" min="100" max="250">
                </div>
                
                <div class="form-group">
                    <label for="weight">体重 (公斤)</label>
                    <input type="number" id="weight" placeholder="例如: 65" min="30" max="300">
                </div>
                
                <div class="form-group">
                    <label for="age">年龄</label>
                    <input type="number" id="age" placeholder="例如: 25" min="18" max="120">
                </div>
                
                <button id="calculate-btn">计算BMI</button>
                <button id="reset-btn" class="reset-btn">重置</button>
            </div>
            
            <div class="result-section">
                <div class="bmi-result" id="bmi-result">
                    <h2>您的BMI结果</h2>
                    <div class="bmi-value" id="bmi-value">25.0</div>
                    <div class="bmi-category" id="bmi-category">正常体重</div>
                    <div class="bmi-desc" id="bmi-desc">您的体重在健康范围内。</div>
                </div>
                
                <div class="bmi-chart">
                    <h3>BMI分类表</h3>
                    <div class="chart-container">
                        <div class="bmi-marker" id="bmi-marker"></div>
                    </div>
                    <div class="chart-labels">
                        <span>偏轻</span>
                        <span>正常</span>
                        <span>超重</span>
                        <span>肥胖</span>
                        <span>重度肥胖</span>
                    </div>
                </div>
                
                <div class="health-tips">
                    <h3>健康建议</h3>
                    
                    <div class="tips-content" id="tips-underweight">
                        <p>您的体重低于健康范围，可能需要增加营养摄入：</p>
                        <p>• 增加高蛋白食物和健康脂肪的摄入</p>
                        <p>• 适当增加餐次，保证足够的热量摄入</p>
                        <p>• 结合力量训练，增加肌肉质量</p>
                        <p>• 如体重持续偏低，建议咨询医生或营养师</p>
                    </div>
                    
                    <div class="tips-content" id="tips-normal">
                        <p>您的体重在健康范围内，请继续保持：</p>
                        <p>• 保持均衡饮食，摄入各类营养素</p>
                        <p>• 每周进行至少150分钟中等强度的运动</p>
                        <p>• 保持充足的睡眠和水分摄入</p>
                        <p>• 定期体检，持续关注健康状况</p>
                    </div>
                    
                    <div class="tips-content" id="tips-overweight">
                        <p>您的体重略高于健康范围，建议：</p>
                        <p>• 控制饮食热量，减少高糖高脂食物摄入</p>
                        <p>• 增加蔬果摄入，保证充足的膳食纤维</p>
                        <p>• 规律运动，每周至少150-300分钟有氧运动</p>
                        <p>• 结合力量训练，提高基础代谢率</p>
                    </div>
                    
                    <div class="tips-content" id="tips-obese">
                        <p>您的体重过高，可能对健康造成风险，建议：</p>
                        <p>• 在医生指导下制定减重计划</p>
                        <p>• 控制每日热量摄入，调整饮食结构</p>
                        <p>• 循序渐进增加运动量，避免过度运动</p>
                        <p>• 定期监测健康指标，如血压、血糖等</p>
                        <p>• 寻求专业医生或营养师的帮助</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const calculateBtn = document.getElementById('calculate-btn');
            const resetBtn = document.getElementById('reset-btn');
            const heightInput = document.getElementById('height');
            const weightInput = document.getElementById('weight');
            const ageInput = document.getElementById('age');
            const bmiResult = document.getElementById('bmi-result');
            const bmiValue = document.getElementById('bmi-value');
            const bmiCategory = document.getElementById('bmi-category');
            const bmiDesc = document.getElementById('bmi-desc');
            const bmiMarker = document.getElementById('bmi-marker');
            
            const tipsUnderweight = document.getElementById('tips-underweight');
            const tipsNormal = document.getElementById('tips-normal');
            const tipsOverweight = document.getElementById('tips-overweight');
            const tipsObese = document.getElementById('tips-obese');
            
            // 计算BMI并显示结果
            calculateBtn.addEventListener('click', function() {
                // 获取输入值
                const height = parseFloat(heightInput.value);
                const weight = parseFloat(weightInput.value);
                const age = parseInt(ageInput.value);
                const gender = document.querySelector('input[name="gender"]:checked').value;
                
                // 验证输入
                if (!height || !weight || !age) {
                    alert('请输入有效的身高、体重和年龄！');
                    return;
                }
                
                if (height < 100 || height > 250) {
                    alert('请输入有效的身高（100-250厘米）！');
                    return;
                }
                
                if (weight < 30 || weight > 300) {
                    alert('请输入有效的体重（30-300公斤）！');
                    return;
                }
                
                if (age < 18 || age > 120) {
                    alert('请输入有效的年龄（18-120岁）！');
                    return;
                }
                
                // 计算BMI: 体重(kg) / 身高(m)²
                const heightInMeter = height / 100;
                const bmi = weight / (heightInMeter * heightInMeter);
                const roundedBMI = bmi.toFixed(1);
                
                // 设置BMI值
                bmiValue.textContent = roundedBMI;
                
                // 根据BMI值确定分类
                let category, description, color;
                let markerPosition = 0;
                
                // 隐藏所有提示
                tipsUnderweight.style.display = 'none';
                tipsNormal.style.display = 'none';
                tipsOverweight.style.display = 'none';
                tipsObese.style.display = 'none';
                
                if (bmi < 18.5) {
                    category = '体重过轻';
                    description = '您的体重低于健康范围，可能需要增加营养摄入。';
                    color = '#4287f5';
                    markerPosition = (bmi / 40) * 100;
                    tipsUnderweight.style.display = 'block';
                } else if (bmi >= 18.5 && bmi < 24) {
                    category = '正常体重';
                    description = '恭喜！您的体重在健康范围内。';
                    color = '#4CAF50';
                    markerPosition = (bmi / 40) * 100;
                    tipsNormal.style.display = 'block';
                } else if (bmi >= 24 && bmi < 28) {
                    category = '超重';
                    description = '您的体重略高于健康范围，建议适当调整饮食和增加运动。';
                    color = '#FFC107';
                    markerPosition = (bmi / 40) * 100;
                    tipsOverweight.style.display = 'block';
                } else if (bmi >= 28 && bmi < 35) {
                    category = '肥胖';
                    description = '您的体重过高，可能会增加健康风险，建议咨询医生。';
                    color = '#FF9800';
                    markerPosition = (bmi / 40) * 100;
                    tipsObese.style.display = 'block';
                } else {
                    category = '重度肥胖';
                    description = '您的体重严重超标，存在较高健康风险，请咨询医生并采取行动。';
                    color = '#F44336';
                    markerPosition = (bmi / 40) * 100;
                    if (markerPosition > 100) markerPosition = 100;
                    tipsObese.style.display = 'block';
                }
                
                // 更新结果
                bmiCategory.textContent = category;
                bmiDesc.textContent = description;
                bmiCategory.style.color = color;
                
                // 更新标记位置
                bmiMarker.style.left = `${markerPosition}%`;
                
                // 显示结果
                bmiResult.style.display = 'block';
            });
            
            // 重置表单
            resetBtn.addEventListener('click', function() {
                heightInput.value = '';
                weightInput.value = '';
                ageInput.value = '';
                document.getElementById('male').checked = true;
                bmiResult.style.display = 'none';
                
                // 隐藏所有提示
                tipsUnderweight.style.display = 'none';
                tipsNormal.style.display = 'none';
                tipsOverweight.style.display = 'none';
                tipsObese.style.display = 'none';
            });
            
            // 输入框聚焦效果
            const inputs = document.querySelectorAll('input[type="number"]');
            inputs.forEach(input => {
                input.addEventListener('focus', function() {
                    this.parentElement.classList.add('focused');
                });
                
                input.addEventListener('blur', function() {
                    this.parentElement.classList.remove('focused');
                });
            });
        });
    </script>
</body>
</html>